<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex {
      width: 500px;
      height: 200px;
      background-color: skyblue;
      display: flex;
      border: 2px solid blue;
    }
    .item:nth-child(1) {
      width: 200px;
      background-color: tomato;
      flex-shrink: 0.1;
    }
    .item:nth-child(2) {
      width: 300px;
      background-color: khaki;
      flex-shrink: 0.4;
    }
    .item:nth-child(3) {
      width: 300px;
      background-color: pink;
      flex-shrink: 0.4;
    }
  </style>
<body>
    <!-- 
        TIP
            flex-shrink属性指定了 flex 元素的收缩规则。
            当所有flex项目占位宽度之和大于容器时候才会发生收缩（默认主轴为水平方向）
            flex 项目收缩的大小是依据所有 flex 项的flex-shrink的值决定的。
            只有当 flex 容器设置了flex-wrap: nowrap;时，才能看到效果
            推荐查看官方文档控制弹性元素在主轴上的比例https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis#flex-grow_%E5%B1%9E%E6%80%A7

        TIP
            flex-shrink的默认值为1，表示容器空间不足时，所有 flex 项目等比缩小。

            计算公式：
            总缩放宽 = 所有子项宽 - 父容器宽
            每个子项宽占比 = 每个子项宽 / 所有子项总宽
            缩小宽 = 每个子项宽占比 * 总缩放宽
            注意：元素无论如何都不会缩小到比自身内容宽还小。

        TIP
            flex-shrink:0;元素无任何如何不缩放

        TIP
            所有元素的 flex-shrink 值大于 1，正常情况下则会将所有溢出容全部收缩至父容器内。
            flex-shrink 的值越大，表示缩收量尽可能越大。
            注意：元素无论如何都不会缩小到比自身内容宽还小。

        TIP
            最终所有元素的总收缩宽 = 总溢出宽 * 所有元素的 flex-shrink 值之和
            注意：元素默认flex-shrink 的值为 1。要想使所有元素的flex-shrink 值之和小于 1，则每个元素都需要单独设置 flex-shrink的值。
    -->

    <div class="flex">
        <!--
              总缩放宽 = (200+200+300) -500 =200
              item1 宽占比=200/(200+200+300)=2/7
              item1最终宽 = 200- 200*2/7=142.85
          -->
        <div class="item item1">
          1
          <!-- 可以试着往这里面插入一张 宽200px的图片，则会发现，元素宽度不会缩小 -->
        </div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
      </div>
</body>
</html>